<template>
  <div class="person">
    <div>
        <span>{{ list1 }}</span>
    </div>
    <ul>
        <li v-for="item in list1" :key="item.id">{{ item.name }}---{{ item.age }}</li>
    </ul>
    <div>
      {{ car }}+++{{ toy }}
    </div>
    <el-button @click="getToyChild(toy)">改toy</el-button>
    <button @click="getToyChildEmitter('鹅鹅鹅饿鹅鹅')">改toy_Emitter</button>
  </div>
</template>

<script lang="ts" setup name="person">
    import hook from './hook'
    import { ref,defineProps,defineEmits } from 'vue'
    import emitter from '@/utils/emitter';  
    const { list1 } = hook()
    const toy = ref('奥特曼')
    const emit = defineEmits('get-Toy')
    function getToyChild(val:string) {
      emit('get-Toy',val)
    }
    function getToyChildEmitter(val:string) {
      emitter.emit('get-Toy-emitter',val)
    }
    defineProps(['car'])
</script>

<style>

</style>